<template>
    <div class="son">
        <div style="margin: 10px; font-size: 20px;">我是son组件</div>
        <div @click="age++" style="margin: 10px;">年龄: {{ age }}</div>
        <div style="margin: 10px;">零食: {{ food }}</div>
        <button @click="giveFood">给零食给姐姐吃</button>
    </div>
</template>

<script setup>
import { ref, inject } from 'vue'
const age = inject('age')
const emitter = inject('emitter')
const food = ref('辣条')
const giveFood = () => {
    emitter.emit('give', food)
    console.log(food)
}
</script>

<style lang="scss" scoped>
.son {
    height: 150px;
    width: 600px;
    border: 3px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
</style>